<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="browsermode" content="application">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <!-- 禁止百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no">
    <title>我的订单</title>
    <link rel="stylesheet" href="${request.contextPath}/web/css/reset.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/web/css/base.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/web/css/order-submit.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/plug/layui/css/layui.css" media="all">
</head>
<script type="text/javascript" src="${request.contextPath}/web/js/media_750.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/common.js?v=${verison!}"></script>
<script src="${request.contextPath}/js/layer.js"></script>
<body style="background-color: rgb(245, 245, 245);">
<div data-role="page">
    <div class="app">
        <div class="order-submission router">
            <div class="allAddress" style="">
                <!--<div class="nav acea-row">-->
                    <!--<div class="item font-color-red on"></div>-->
                    <!--<div class="item font-color-red on2"></div>-->
                <!--</div>-->
                <div class="address acea-row row-between-wrapper">
                    <div class="addressCon" data-id="<#if selectAddress??>${selectAddress.id}</#if>">
                        <#if selectAddress??>
                            <div>
                                <span class="name"> ${selectAddress.userName}</span>
                                <span class="phone">${selectAddress.phone}</span>
                            </div>
                            <div class="place">
                                <span class="default font-color-red">[默认]</span>
                                ${selectAddress.address}
                            </div>
                        <#else>
                                设置收货地址
                        </#if>
                    </div>
                    <div class="iconfont icon-jiantou"></div>
                </div>
                <!--<a class="address acea-row row-between-wrapper" style="display: none;">-->
                    <!--<div class="addressCon">-->
                        <!--<div class="name">-->
                            <!--测试门店-->
                            <!--<span class="phone">13800138000</span>-->
                        <!--</div>-->
                        <!--<div class="place">-->
                            <!--上海,黄浦区,南京东路-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="iconfont icon-jiantou"></div>-->
                <!--</a>-->
                <div class="line">
                    <img src="${request.contextPath}/web/images/line.05bf1c84.jpg">
                </div>
            </div>
            <div class="orderGoods">
                <div class="total">共${totalNum}件商品</div>
                <div class="goodWrapper">
                    <#if goods??>
                        <#list goods as item>
                            <div class="item acea-row row-between-wrapper">
                                <div class="pictrue">
                                    <img src="${item.image}" class="image">
                                </div>
                                <div class="text">
                                    <div class="acea-row row-between-wrapper">
                                        <div class="name line1">${item.goodsName}</div>
                                        <div class="num">x ${item.addNum}</div>
                                    </div>
                                    <div class="attr line1">
                                        <#if item.goodsAttr??>${item.goodsAttr!}<#else>默认</#if>
                                    </div>
                                    <div class="money font-color-red">
                                        ￥${item.webPrice!}
                                    </div>
                                </div>
                            </div>
                        </#list>
                    </#if>
                </div>
            </div>
            <div class="wrapper">
                <!--<div class="item acea-row row-between-wrapper">-->
                    <!--<div>优惠券</div>-->
                    <!--<div class="discount coupon">-->
                        <!--请选择-->
                        <!--<span class="iconfont icon-jiantou"></span>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="item acea-row row-between-wrapper">
                    <div>积分抵扣</div>
                    <div class="discount">
                        <div class="select-btn">
                            <div class="checkbox-wrapper">
                                <label class="well-check">
                                    <input type="checkbox" id="score">
                                    <i class="icon"></i>
                                    <span class="integral">
                                        当前积分
                                        <span class="num font-color-red">${user.score!}</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="item acea-row row-between-wrapper mail-cost">-->
                    <!--<div>快递费用</div>-->
                    <!--<div class="discount">-->
                        <!--￥1.00-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="contact" style="display: none">-->
                    <!--<div class="item acea-row row-between-wrapper">-->
                        <!--<div>联系人</div>-->
                        <!--<div class="discount">-->
                            <!--<input type="text" placeholder="请填写您的联系姓名">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="item acea-row row-between-wrapper">-->
                        <!--<div>联系电话</div>-->
                        <!--<div class="discount">-->
                            <!--<input type="text" placeholder="请填写您的联系电话">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="item">
                    <div>备注信息</div>
                    <textarea placeholder="请添加备注（150字以内）" id="remark"></textarea>
                </div>
            </div>
            <!--<div class="wrapper">
                <div class="item">
                    <div>支付方式</div>
                    <div class="list">
                        <div class="payItem acea-row row-middle on">
                            <div class="name acea-row row-center-wrapper">
                                <div class="iconfont icon-weixin2"></div>
                                微信支付
                            </div>
                            <div class="tip">微信快捷支付</div>
                        </div>
                        <div class="payItem acea-row row-middle on">
                            <div class="name acea-row row-center-wrapper">
                                <div class="iconfont icon-icon-test bounceIn"></div>
                                余额支付
                            </div>
                            <div class="tip">可用余额：1950.00</div>
                        </div>
                        <div class="payItem acea-row row-middle">
                            <div class="name acea-row row-center-wrapper">
                                <div class="iconfont icon-yinhangqia"></div>
                                线下支付
                            </div>
                            <div class="tip">线下方便支付</div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="moneyList">
                <div class="item acea-row row-between-wrapper">
                    <div>商品总价：</div>
                    <div class="money">￥${totalPrice!}</div>
                </div>
                <!--<div class="item acea-row row-between-wrapper carriage">-->
                    <!--<div>运费：</div>-->
                    <!--<div class="money">+￥1.00</div>-->
                <!--</div>-->
            </div>
            <div style="height: 1.2rem;"></div>
            <div class="footer acea-row row-between-wrapper">
                <div>
                    合计:
                    <span class="font-color-red">￥${totalPrice!}</span>
                </div>
                <a class="settlement" onclick="buy()">立即结算</a>
            </div>
            <div>
                <div class="coupon-list-window">
                    <div class="title">
                        优惠券
                        <span class="iconfont icon-guanbi"></span>
                    </div>
                    <div>
                        <div class="pictrue">
                            <img src="${request.contextPath}/web/images/noCoupon.e524084b.png" class="image">
                        </div>
                    </div>
                </div>
                <div class="mask" hidden="hidden"></div>
            </div>
            <div>
                <div class="address-window">
                    <div class="title">
                        选择地址<span class="iconfont icon-guanbi"></span>
                    </div>
                    <div class="list">
                        <#if address??>
                            <#list address as item>
                                <div class="item acea-row row-between-wrapper <#if selectAddress.id == item.id>font-color-red </#if>"
                                     data-name="${item.userName}"
                                     data-phone="${item.phone}"
                                     data-place="${item.address}"
                                     data-id="${item.id}"
                                >
                                    <!--<span class="iconfont icon-ditu"></span>-->
                                    <div class="addressTxt">
                                        <div>
                                            <span class="name">${item.userName}</span>
                                            <span class="phone">${item.phone}</span>
                                        </div>
                                        <div class="line1">
                                            ${item.address}
                                        </div>
                                    </div>
                                    <span class="iconfont icon-complete"></span>
                                </div>
                            </#list>
                            <#else>
                                123
                        </#if>
                        <#if address?size==0>
                            <div class="pictrue"><img src="${request.contextPath}/web/images/noAddress.d76a1cef.png" class="image"></div>
                        </#if>
                    </div>
                    <div class="addressBnt bg-color-red" onclick="addAddress()">
                        新加地址
                    </div>
                </div>
                <div class="mask" hidden="hidden"></div>
            </div>
        </div>
    </div>
    <#include "include/right.html" />
</div>
</body>
<script>
    var userScore = 0;
    $(function () {
        function toggleAddressList() {
            $('.address-window').toggleClass('on');
            $('.mask').toggle();
        }

        function toggleCouponList() {
            $('.coupon-list-window').toggleClass('on');
            $('.mask').toggle();
        }

        function changeTab() {
            var $this = $(this);
            var $items = $('.nav.acea-row .item'), $1 = $($items[0]), $2 = $($items[1]);
            var index = $this.index();
            if (index === 0) {
                $1.removeClass('on2');
                $1.addClass('on');
                $2.removeClass('on');
                $2.addClass('on2');
                $('.allAddress div.address').show();
                $('.allAddress a.address').hide();
                $('.mail-cost').show();
                $('.contact').hide();
                $('.wrapper .item .list .payItem:nth-child(3)').show();
                $('.moneyList .carriage').hide();
            } else {
                $1.removeClass('on');
                $1.addClass('on2');
                $2.removeClass('on2');
                $2.addClass('on');
                $('.allAddress div.address').hide();
                $('.allAddress a.address').show();
                $('.mail-cost').hide();
                $('.contact').show();
                $('.wrapper .item .list .payItem:nth-child(3)').hide();
                $('.moneyList .carriage').hide();
            }
        }

        function setAddressCon(id,name, phone, place, isDefault) {
            var defaultMark = '<span class="default font-color-red">[默认]</span>'
            $('.addressCon .name').html(name);
            $('.addressCon .phone').html(phone);
            $('.addressCon .place').html(place);
            $('.addressCon').data("id",id);
            if (!!isDefault) {
                $('.addressCon .place').html(place);
            } else {
                $('.addressCon .place').html(defaultMark + place);
            }
        }

        $('.allAddress div.address, .address-window .title .iconfont').on('touchstart', toggleAddressList);
        $('.wrapper .coupon, .coupon-list-window .title .iconfont').on('touchstart', toggleCouponList);
        // 点击 mask 关闭窗口
        $('.mask').on('touchstart', function () {
            $('.coupon-list-window').removeClass('on');
            $('.address-window').removeClass('on');
            $('.mask').toggle();
        })

        $('.nav.acea-row .item').on('touchstart', function () {
            changeTab.apply(this);
        })
        $('.address-window .list .item').on('touchstart', function () {
            var $this = $(this);
            setAddressCon($this.data('id'),$this.data('name'), $this.data('phone'), $this.data('place'), $this.data('isDefault'));
            toggleAddressList();
            $('.address-window .list .item').removeClass('font-color-red');
            $('.address-window .list .item span').removeClass('font-color-red');
            $this.addClass('font-color-red');
        })
        $('.wrapper .payItem').on('touchstart', function () {
            $('.wrapper .payItem').removeClass('on');
            $(this).addClass('on');
        })
        $('#score').on('change', function () {
            var $this = $(this);
            var checked = $this.is(":checked");
            var totalScore = '${user.score?c}';
            var totalFee = '${totalPrice!}';
            var payFee = totalFee;
            if (checked) {
               if(totalScore*10 >= totalFee*100){
                 if(totalFee*10 < 0){
                    userScore = 1;
                 }else{
                    userScore = totalFee*10;
                 }
                 payFee = '0.0';
               }else{
                 userScore = totalScore;
                 payFee = (totalFee*100 - totalScore*10)/100;
               }
            } else {
                userScore = 0;
            }
            $(".footer .font-color-red").html("￥"+payFee);

        })
    })

    function addAddress(){
        window.location.href="${request.contextPath}/web/addressAdd?type=${orderSeq!}"
    }
    function buy(){
        var obj = new Object();
        obj["orderSeq"] = '${orderSeq!}';
        obj["remark"] = $("#remark").val();
        obj["addressId"] =  $('.addressCon').data("id");
        obj["userScore"] =  userScore;
         if(obj["addressId"] == ''){
            layer.msg("请选择地址！")
            return;
         }
         $.ajax({
              type: 'POST',
              url: '${request.contextPath}/web/order/updateExtInfo',
              data: JSON.stringify(obj),
              dataType:'json',
              contentType:'application/json',
              success: function(data){
                  if(data.code==200){
                        if(data.data == 1){
                            window.location.href="${request.contextPath}/weixin/unifiedOrder/${orderSeq!}";
                        }else if(data.data == 2){
                            location.href="${request.contextPath}/web/paySuccess/${orderSeq!}";
                        }else{
                            layer.msg("当前订单不存在，请联系管理人员")
                        }
                  }else{
                     layer.msg(data.msg)
                  }
              }
        });
    }
</script>
</html>